<template>
	<view>
		<u-navbar :autoBack="true" leftIconColor="#ffffff" title="门店设置" :placeholder="true" bgColor="#3ACD90"  :titleStyle="{ color: '#FFFFFF', fontSize: '40rpx' }"></u-navbar>
		
		<view class="mt20" style="padding: 20rpx 30rpx ;background-color: #ffffff;">
		
			<view  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">门店名称</view>
				<view class="grey-color">{{mendianInfo.mer_name}}</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">门店logo</view>
				<view>
					<u-avatar :src="mendianInfo.mer_avatar"></u-avatar>
				</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">门店详图</view>
				<view>
					<u-avatar :src="mendianInfo.mer_banner"></u-avatar>
					
				</view>
				
			</view>
			
		</view>
	
		<view class="mt20" style="padding: 20rpx 30rpx ;background-color: #ffffff;">
		
			<view  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">营业状态</view>
				<view class="flex-center" style="display: flex;">
					<view>
						<u-badge :isDot="true" bgColor="green" ></u-badge>
					</view>
					<view class="grey-color" style="margin-left: 10rpx;">
					营业中
					</view>
				</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">联系电话</view>
				<view class="grey-color" style="display: flex;" @click="phoneopen">
					<view >{{mendianInfo.mer_take_phone}}</view>
					<u-icon name="arrow-right"></u-icon>

				</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">店铺地址</view>
				<view class="grey-color" style="display: flex;" @click="dianpuview">
					<view >{{mendianInfo.mer_address}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">营业时间</view>
				<view class="grey-color" style="display: flex;" @click="shijianview">
					<view >{{mendianInfo.mer_take_time[0]}}-{{mendianInfo.mer_take_time[1]}}</view>
					<u-icon name="arrow-right"></u-icon>
					
				</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">签约查询</view>
				<view  @click="shopopen">
					<u-icon name="arrow-right"></u-icon>

				</view>
				
			</view>
			
		</view>
		
		<u-popup mode="center" :show="phoneshow" @close="phoneclose" @open="phoneopen" :round="8">
			<view style="width:600rpx;padding:20rpx">
				<view class="flex-center" style="display: flex;">修改联系电话</view>
				<view>现联系电话：{{mendianInfo.mer_take_phone}}</view>
				<view>
					<u--input
						v-model="newPhone"
					    placeholder="请输入内容"
					    border="bottom"
					    clearable
					  ></u--input>
				</view>
				<u-line color="red"></u-line>
				<view>
					<u-button type="warning" text="确认修改" @click="changePhone"></u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="bottom" :show="shopshow" @close="shopclose" @open="shopopen" :closeable="true" :round="8">
			<view style="padding:20rpx">
				<view style="font-size: 40rpx;">签约信息</view>
				<u-line margin="10rpx 0"></u-line>
				<view>
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view>签约时间</view>
						<view class="grey-color" >
							2023-7-23 —— 2024-8-23
						</view>
					</view>
					<view class="mt20" style="display: flex;justify-content: space-between;align-items: center;">
						<view>积分结算模式</view>
						<view class="grey-color" >全剧模式</view>
					</view>
					<view class="mt20" style="display: flex;justify-content: space-between;align-items: center;">
						<view>积分比例</view>
						<view class="grey-color" >20%</view>
					</view>
				</view>
			</view>
			<view class="grey-color" style="font-size: 24rpx;" >*如需修改店铺收款积分模式，请联系客服或当地商务人员</view>
		</u-popup>
			
	</view>
</template>

<script>
	
	import {
		merinfo,
		merupdate
	} from "@/common/apis/mer.js"
	export default {
		data() {
			return {
				albumWidth: 0,

				list: [],
				phoneshow: false,
				shopshow: false,
				timeshow: false,
				mendianInfo:{},
				newPhone:""

			}
		},
		onLoad(){
			this.getmerinfo()
		},
		methods: {
			getmerinfo(){
				let that = this
				merinfo().then( res => {
					console.log("res",res)
					if(res.status != 200){
						uni.$u.toast('参数有误')
					}else{
						that.mendianInfo = res.data
					}
				})
			},
			imageClick(){
				uni.previewImage({
				    urls: this.list
				})
			},
			phoneopen() {
			    // console.log('open');
				this.phoneshow = true
			},
			phoneclose() {
			  this.phoneshow = false
			  // console.log('close');
			},
			shopopen() {
			    // console.log('open');
				this.shopshow = true
			},
			shopclose() {
			  this.shopshow = false
			  // console.log('close');
			},
			dianpuview() {
			    this.$Router.push({
			    	path: '/pages/other/dianpu'
			    })
			},
			shijianview() {
			  this.$Router.push({
			  	path: '/pages/other/shijian'
			  })
			},
			changePhone(){
				console.log("this is change phone",this.mendianInfo)
				this.mendianInfo.mer_take_phone = this.newPhone
				this.mendianInfo.type = 2
				let that = this
				merupdate(this.mendianInfo)
				.then( res=>{
					console.log("update",res)
					if(res.status == 200){
						that.phoneshow = false
					}else{
						uni.$u.toast('修改失败')
					}
				} )
			}
		}
	}
</script>

<style scoped>
.grey-color{
	color:#666666
}
/deep/ .u-input{
	padding:24rpx 0 !important
	
}
</style>